import React from "react";
import propTypes from "prop-types";
function TodoMain(props) {
  console.log(props.taskList);
  return (
    <ul className="todo-main">
      {props.taskList.map((ite) => (
        <li key={ite.id}>
          <label>
            {/*<input onChange={()=>props.changeIsChecked(item.id)} checked={item.isChecked} type="checkbox"/>*/}
            <input
              onChange={props.changeIsChecked.bind(null, ite.id)}
              checked={ite.isChecked}
              type="checkbox"
            />
            <span>{ite.title}</span>
          </label>
          <button
            onClick={props.delTaskById.bind(null, ite.id)}
            className="btn btn-danger"
          >
            删除
          </button>
        </li>
      ))}
    </ul>
  );
}
TodoMain.propTypes = {
  taskList: propTypes.array.isRequired,
  changeIsChecked: propTypes.func.isRequired,
  delTaskById: propTypes.func.isRequired,
};

export default TodoMain;
